import React, {useState, useEffect} from 'react'

import {Card, List, Rate} from 'antd'

import {FireOutlined} from '@ant-design/icons'

import {Container} from './style'

import moment from 'moment'

import ToolRequest from '../../../request/tool_request'

const tool_request = new ToolRequest()


function DevelopTool(props){
    const {history} = props
    const [devToolList, setDevToolList] = useState([])

    useEffect(() => {
        getToolList()
    }, [])
    const getToolList = () => {
        tool_request.getToolList().then(res => {
            setDevToolList(res || [])
        })
    }

    const lookTools = (path, id) => {
        tool_request.addUseTimes({
            id
        })
        history.push('/main/developtool/' + path)
    }
    return (
        <Container>
            <List
                grid={{ gutter: 20, column: 4 }}
                dataSource={devToolList}
                renderItem={item => (
                    <List.Item>
                        <Card
                            hoverable
                            onClick={() => lookTools(item.path, item.id)}
                        >
                            <Card.Meta
                                title={item.name}
                                description={item.desc.length > 18 ? item.desc.substring(0, 18) + ' ...' : item.desc}
                            />
                            <div className="footer">
                                <span className="create-date">更新时间：{moment(Number(item.updateDate)).format('YYYY-MM-DD HH:mm')}</span>
                                <Rate disabled value={item.rate || 0} style={{color: 'red', fontSize: 12}} character={<FireOutlined />} allowHalf />
                            </div>
                        </Card>
                    </List.Item>
                )}
            >
            </List>
        </Container>
    )
}

export default DevelopTool